/*
 * @Author: xiaosihan
 * @Date: 2023-02-06 15:22:57
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-01-28 05:04:08
 */
import hashHistory from "@hashHistory";
import GLTF from "@views/component3d/GLTF/GLTF";
import Sky from "@views/component3d/Sky/Sky";
import { round } from "lodash";
import {
    AmbientLight,
    BackSide,
    BoxGeometry,
    BufferAttribute,
    BufferGeometry,
    Camera,
    Color,
    CustomBlending,
    DirectionalLight,
    DirectionalLightHelper,
    DoubleSide,
    Euler,
    FrontSide,
    Group,
    Material,
    Matrix4,
    Mesh,
    MeshLambertMaterial,
    MeshPhongMaterial,
    MeshStandardMaterial,
    NormalBufferAttributes,
    PlaneGeometry,
    Scene,
    ShaderChunk,
    ShaderMaterial,
    SphereGeometry,
    Vector2,
    Vector3,
    WebGLRenderer,
} from "three";
import { autorun } from "mobx";
import ThreeBase from "three-base";
import ExtrudeMesh from "three-base/ExtrudeMesh";
import KeyFrameAnimation from "three-base/KeyFrameAnimation";
import PlaneModal1 from "three-base/PlaneModal1";
import PlaneWithHtml from "three-base/PlaneWithHtml";
import PointLight from "three-base/PointLight";
import SpriteModal1 from "three-base/SpriteModal1";
import SpriteText2 from "three-base/SpriteText2";
import SpriteWithHtml from "three-base/SpriteWithHtml";
import Text3D from "three-base/Text3D";
import Transition from "three-base/Transition";
import keyContorls from "three-base/keyContorls";
import threeLoader from "three-base/threeLoader";
import threeUtils from "three-base/threeUtils";
import { degToRad } from "three/src/math/MathUtils";
import road1PNG from "./img/road1.png";
import uvJPG from "./img/uv.jpg";
import awarrPNG from "./img/awarr.png";

import Mirror from "@views/component3d/Mirror/Mirror";
import StlMesh from "@views/component3d/StlMesh/StlMesh";
import { Line2 } from "three/examples/jsm/lines/Line2.js";
import { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js";
import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";

import MeshBase from "three-base/MeshBase";
import SoldierGLB from "./Soldier.glb?url"; //带动画的模型
import stlSTL from "./stl.stl?url";

import utils from "@utils";
import ManyModelGroup from "@views/component3d/ManyModelGroup/ManyModelGroup";
import USDZ from "@views/component3d/USDZ/USDZ";
import effectMaterial1 from "@views/materials/effectMaterial1";
import Fire from "three-base/Fire/Fire";
import InstancedMeshBase from "three-base/InstancedMeshBase";
import PipeMesh from "three-base/PipeMesh";
import bottleGLB from "../glb/bottle.glb?url";
import ClothMesh from "./component3d/ClothMesh/ClothMesh";
import cloth1GLB from "./component3d/ClothMesh/cloth1.glb?url";
import SphereMesh from "./component3d/SphereMesh/SphereMesh";
import Showcase from "./component3d/Showcase/Showcase";
import { objectPrototype } from "mobx/dist/internal";
import FPScontrol from "three-base/FPScontrol";
import homeStore from "./homeStore";
import Ground1 from "three-base/Ground1";
import { OctreeHelper } from "three/examples/jsm/helpers/OctreeHelper";

/**
 * @class HomeRender
 * @extends {ThreeBase}
 */
class HomeRender extends ThreeBase {
    constructor() {
        super();
    }

    // 环境光
    ambientLight = (() => {
        const ambientLight = new AmbientLight("#fff", 1);
        this.add(ambientLight);
        return ambientLight;
    })();

    //点光源
    pointLight = (() => {
        const pointLight = new PointLight("#fff", 1);
        pointLight.distance = 1000;
        pointLight.decay = 0;
        pointLight.position.set(10, 10, 10);
        this.add(pointLight);
        return pointLight;
    })();

    //点光源数组
    pointLightGroup = (() => {
        const pointLightGroup = new Group();

        (async () => {
            for (let i = 1; i < 2; i++) {
                const pl = new PointLight("#fff", 1);
                pl.distance = 2;
                pl.position.set(i * 2, 0.1, 10);
                pointLightGroup.add(pl);
            }
        })();

        this.add(pointLightGroup);
        return pointLightGroup;
    })();

    //模拟聚光灯
    p = (() => {
        const pl = new PlaneGeometry(5, 5, 1, 1);
        pl.rotateX(degToRad(90));
        const pm = new ShaderMaterial({
            uniforms: {
                color: { value: new Color("#ffffff") },
            },
            vertexShader: `
            ${ShaderChunk.common}
            ${ShaderChunk.logdepthbuf_pars_vertex}
            varying vec2 vUv;
            void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
                ${ShaderChunk.logdepthbuf_vertex}
            }
        `,
            fragmentShader: `
            ${ShaderChunk.logdepthbuf_pars_fragment}
            varying vec2 vUv;
            uniform vec3 color;
            void main() {
                vec2 center = vec2(0.5,0.5);
                float d = distance(center, vUv);
                float opacity = smoothstep( 0.0, 1.0, 0.5 - d);
                gl_FragColor = vec4(color, opacity * opacity * 2.0 );
                ${ShaderChunk.logdepthbuf_fragment}
            }
        `,
            blending: CustomBlending,
            side: DoubleSide,
            depthTest: true,
            depthWrite: true,
            transparent: true,
        });

        const p = new Mesh(pl, pm);
        p.position.set(4, 0.01, 10);
        this.add(p);
        return p;
    })();

    // 方向光
    directionalLight = (() => {
        const directionalLight = new DirectionalLight("#fff", 1);
        directionalLight.position.set(-10, 10, 5);
        directionalLight.target.position.set(0, 0, 0);
        directionalLight.castShadow = true;
        directionalLight.shadow.mapSize.set(1024, 1024);
        // this.add(directionalLight);
        return directionalLight;
    })();

    // 方向光2
    directionalLight2 = (() => {
        const directionalLight = new DirectionalLight("#fff", 1);
        directionalLight.position.set(10, 10, 5);
        directionalLight.shadow.mapSize.set(1024, 1024);
        // this.add(directionalLight);
        return directionalLight;
    })();

    //
    directionalLightHelper2 = (() => {
        const directionalLightHelper2 = new DirectionalLightHelper(
            this.directionalLight2
        );
        this.add(directionalLightHelper2);
        return directionalLightHelper2;
    })();

    // 方向光3
    directionalLight3 = (() => {
        const directionalLight = new DirectionalLight("#fff", 1);
        directionalLight.position.set(-10, 10, 5);
        directionalLight.shadow.mapSize.set(1024, 1024);
        this.add(directionalLight);
        return directionalLight;
    })();

    //
    directionalLightHelper3 = (() => {
        const directionalLightHelper3 = new DirectionalLightHelper(
            this.directionalLight3
        );
        this.add(directionalLightHelper3);
        return directionalLightHelper3;
    })();

    //粒子火焰
    fire = (() => {
        const fire = new Fire();
        fire.fireColor = "#ff2200"; // 火焰的颜色
        fire.fireScale = 1; // 火焰的整体缩放值
        fire.fireRadius = 0.5; // 火焰的燃烧半径
        fire.fireHeight = 3; // 火焰的高度
        fire.position.set(10, 0, 10);
        this.add(fire);
        return fire;
    })();

    //第一人称控制器
    fpscontrol = (() => {
        const fpscontrol = new FPScontrol(
            this.getCamera(),
            this.renderer.domElement
        );
        fpscontrol.enable = false;

        ["jump_start", "jump_end", "move_start", "move_end"].map((event) => {
            fpscontrol.addEventListener(event, () => {
                console.log(event);
            });
        });

        return fpscontrol;
    })();

    //装饰地板
    ground1 = (() => {
        const ground1 = new Ground1();
        ground1.setSize(500, 500);
        this.add(ground1);
        this.fpscontrol.addOctree(ground1);
        return ground1;
    })();

    init() {
        super.init();

        // 不自动渲染
        this.autoRender = false;
        this.needRender = true;

        // this.scene.background = new Color("#333333");

        if (threeUtils.isDev && localStorage.three_base_lookAt) {
            this.resetLookAt({
                ...JSON.parse(localStorage.three_base_lookAt),
            });
        }

        if (threeUtils.isDev) {
            this.controls.addEventListener("change", () => {
                localStorage.three_base_lookAt = JSON.stringify(this.getLookAt());
            });
        }

        if (
            threeUtils.isProd ||
            (threeUtils.isDev && !localStorage.three_base_lookAt)
        ) {
            this.resetLookAt({
                center: new Vector3(0, 0, 0),
                position: new Vector3(-7.049, 27.469, 59.276),
            });
        }
    }

    // 测试
    line2 = (() => {
        const lineGeometry = new LineGeometry();
        lineGeometry.setPositions([0, 0, 0, 10, 10, 10]);
        const lineMaterial = new LineMaterial({
            color: 0xffffff,
            worldUnits: false,
            dashed: false,
            dashSize: 5,
            gapSize: 5,
            dashOffset: 0,
            linewidth: 4,
            depthTest: true,
            resolution: new Vector2(1, 1),
        });
        const line2 = new Line2(lineGeometry, lineMaterial);
        line2.renderOrder = 1;
        line2.onBeforeRender = (
            renderer: WebGLRenderer,
            scene: Scene,
            camera: Camera,
            geometry: BufferGeometry<NormalBufferAttributes>,
            material: Material,
            group: Group
        ) => {
            renderer.getSize(lineMaterial.resolution);
        };

        line2.userData = {
            glow_enable: true, //启用辉光
            glow_color: "#04fa12", //辉光颜色
            glow_width: 1, //辉光厚度(像素)
            glow_opacity: 0.3, //辉光透明度(像素)
        };

        this.add(line2);
        return line2;
    })();

    // 辉光测试
    glow_test = (() => {
        const glow_test = new Text3D("辉光");
        glow_test.position.set(38, 0.2, 10);

        glow_test.userData = {
            glow_enable: true, //启用辉光
            glow_color: "#04fa12", //辉光颜色
            glow_width: 20, //辉光厚度(像素)
            glow_opacity: 0.5, //辉光透明度(像素)
        };

        this.add(glow_test);
        return glow_test;
    })();

    // 描边测试
    stroke_test = (() => {
        const glow_test = new Text3D("描边");
        glow_test.position.set(30, 0.2, 10);

        glow_test.userData = {
            stroke_enable: true, //启用描边
            stroke_color: "#04fa12", //描边颜色
            stroke_width: 3, //描边厚度(像素)
        };

        this.add(glow_test);
        return glow_test;
    })();

    //颜色叠加
    cover_test = (() => {
        const cover_test = new Text3D("颜色叠加");
        cover_test.position.set(22, 0.2, 10);

        cover_test.userData = {
            cover_enable: true, //启用颜色叠加
            cover_color: "#04fa12", //颜色叠加颜色
            cover_opacity: 0.5, //颜色叠加厚度(像素)
            cover_depth_test: false, // 深度测试
        };

        this.add(cover_test);
        return cover_test;
    })();

    //发光测试
    bloom_test = (() => {
        const bloom_test = new Text3D("鼠标移入发光");
        bloom_test.setText({
            size: 0.5,
        });
        bloom_test.material.color.set("#1890FF");
        bloom_test.position.set(15, 0.2, 10);
        bloom_test.userData = {
            cursor: "pointer",
            enableEvent: true,
            bloom_enable: false, //启用发光
            bloom_threshold: 0, // 发光的阈值
            bloom_strength: 1, // 发光的强度必须整数
            bloom_radius: 1, // 发光的半径
        };
        bloom_test.addEventListener("mouseenter", (e) => {
            Object.assign(bloom_test.userData, {
                bloom_enable: true,
            });
        });
        bloom_test.addEventListener("mouseleave", (e) => {
            Object.assign(bloom_test.userData, {
                bloom_enable: false,
            });
        });
        this.add(bloom_test);
        return bloom_test;
    })();

    box = (() => {
        const geometry = new BoxGeometry(5, 5, 5);
        const matearil = new MeshStandardMaterial({
            color: "#0000ff",
            emissive: "#40a9ff",
            emissiveMap: threeLoader.getTexture(awarrPNG),
            emissiveIntensity: 1,
        });
        const mesh = new Mesh(geometry, matearil);

        mesh.position.set(-10, 0, 0);
        mesh.userData = {
            cursor: "pointer",
            enableEvent: true,
            bloom_enable: false, //启用发光
            bloom_threshold: 0.2, // 发光的阈值
            bloom_strength: 1, // 发光的强度必须整数
            bloom_radius: 1, // 发光的半径
        }

        const transition = new Transition({ rotationY: 0 });

        // 动画对象播放回调
        transition.onChange(({ rotationY }) => {
            mesh.rotation.y = rotationY;
            this.needRender = true;
        });

        // 点击设置动画对象的值
        mesh.addEventListener("click", (e) => { });

        mesh.addEventListener("dbclick", (e) => {
            console.log("dbclick");
        });

        mesh.addEventListener("leftclick", (e) => {
            transition.set({ rotationY: Math.random() * 5 });
            mesh.material.map = threeLoader.getTexture(uvJPG);
            mesh.material.needsUpdate = true;
        });
        mesh.addEventListener("rightclick", (e) => {
            hashHistory.push("/home2");
        });
        mesh.addEventListener("mouseenter", (e) => {
            Object.assign(mesh.userData, {
                glow_enable: true,
                glow_color: "#04fa12",
                glow_width: 10,
                glow_opacity: 1,
            });
        });
        mesh.addEventListener("mouseleave", (e) => {
            Object.assign(mesh.userData, {
                glow_enable: false,
                glow_color: "#04fa12",
                glow_width: 10,
                glow_opacity: 1,
            });
        });
        mesh.addEventListener("mousemove", (e) => { });
        mesh.addEventListener("mousedown", (e) => { });
        mesh.addEventListener("mouseup", (e) => { });
        this.add(mesh);
        return mesh;
    })();

    //天空
    sky = (() => {
        const sky = new Sky();
        this.add(sky);
        return sky;
    })();

    // 加载 gltf
    gltf = (() => {
        const gltf = new GLTF();
        gltf.position.set(20, 0, 0);
        this.add(gltf);
        return gltf;
    })();

    //加载实例模型的例子,瓷瓶模型
    instancedMeshBase = (() => {
        const instancedMeshBase = new InstancedMeshBase(bottleGLB);
        instancedMeshBase.addEventListener("loaded", () => {
            //设置实例组的长度
            instancedMeshBase.setCount(10);
            // 设置每一个实例矩阵
            const matrix4 = new Matrix4();
            for (let i = 0; i < 10; i++) {
                matrix4.makeTranslation(new Vector3(i * 3.2 + 6, 0, -6));
                instancedMeshBase.setMatrixAt(i, matrix4);
            }
            // 这个方法可以不用操作矩阵
            instancedMeshBase.setTRS(0, {
                scale: new Vector3(1.5, 1.5, 1.5),
            });
            instancedMeshBase.setTRS(0, {
                position: new Vector3(40, 0, -6),
            });
            instancedMeshBase.setTRS(0, {
                rotation: new Euler(0, 0, -1),
            });
            // 获取移动旋转缩放
            instancedMeshBase.getTRS(0);
        });
        this.add(instancedMeshBase);
        return instancedMeshBase;
    })();

    // 大量的模型组对象 用于处理 大量的树, 路灯 等
    manyModelGroup = (() => {
        const manyModelGroup = new ManyModelGroup();
        this.add(manyModelGroup);
        return manyModelGroup;
    })();

    //关键帧动画对象测试
    keyFrameAnimation = (() => {
        // 创建一个立方体
        const geometry = new BoxGeometry(5, 1, 5);
        const matearil = new MeshLambertMaterial({
            color: "#f0f",
            wireframe: true,
        });
        const mesh = new Mesh(geometry, matearil);

        //创建关键帧动画对象
        const keyFrameAnimation = new KeyFrameAnimation({
            object3d: mesh,
            keyframes: [
                {
                    position: new Vector3(0, 0, 0),
                    scale: new Vector3(1, 1, 1),
                    rotation: new Euler(0, 0, 0),
                    timeTemp: 0,
                },
                {
                    position: new Vector3(0, 5, 1),
                    scale: new Vector3(1, 1, 1),
                    rotation: new Euler(0, degToRad(0), 0),
                    timeTemp: 5000,
                },
                {
                    position: new Vector3(0, 5, 5),
                    scale: new Vector3(1, 1, 1),
                    rotation: new Euler(0, degToRad(0), 0),
                    timeTemp: 10000,
                },
            ],
        });

        // 使用键盘调整关键帧参数
        keyContorls.addEventListener("change", (e: any) => {
            const keyframe = keyFrameAnimation.getKeyframe(2);
            keyframe.position.add(e.direction);
            console.log(
                keyframe.position
                    .toArray()
                    .map((v) => round(v, 3))
                    .join(", ")
            );
            keyFrameAnimation.setKeyframe(2, keyframe);
        });

        // 当前帧更新
        keyFrameAnimation.addEventListener("update", () => {
            this.needRender = true;
        });

        this.add(keyFrameAnimation);

        return keyFrameAnimation;
    })();

    //3D组件提示窗
    spriteModal1 = (() => {
        const spriteModal1 = new SpriteModal1();
        // 更新文本
        spriteModal1.updata({
            size: 10,
            title: "SpriteModal1",
            titleColor: "#ffffff",
            texts: [
                { text: "3D组件提示窗 SpriteModal1" },
                { text: "支持鼠标事件,自动换行,文字颜色,文字大小", color: "#ffff00" },
                { text: "使用\\n换行", color: "#00ffff" },
            ],
        });
        spriteModal1.userData = { cursor: "pointer", enableEvent: true };
        spriteModal1.addEventListener("leftclick", (e) => { });
        spriteModal1.position.set(-20, 0, 0);
        this.add(spriteModal1);
        return spriteModal1;
    })();

    //3D平面组件提示窗
    planeModal1 = (() => {
        const planeModal1 = new PlaneModal1();
        // 更新文本
        planeModal1.updata({
            size: 10,
            title: "PlaneModal1",
            titleColor: "#ffffff",
            texts: [
                { text: "3D平面组件弹窗 PlaneModal1" },
                { text: "支持鼠标事件,自动换行,文字颜色,文字大小", color: "#ffff00" },
                { text: "使用\\n换行", color: "#00ffff" },
            ],
        });
        planeModal1.userData = { cursor: "pointer", enableEvent: true };
        planeModal1.addEventListener("leftclick", (e) => { });
        planeModal1.position.set(-30, 0, 0);
        this.add(planeModal1);
        return planeModal1;
    })();

    // 3D文字
    text3D = (() => {
        const text3D = new Text3D("new Text3D\n3d文字组件");
        text3D.position.set(6, 2, 0);
        this.add(text3D);
        return text3D;
    })();

    // htlml样式面板
    planeWithHtml = (() => {
        const planeWithHtml = new PlaneWithHtml(`
            <span style="font-family: 黑体;font-size:100px;color:#000;" >PlaneWithHtml</span>
            <br/>
            <span style="font-family: 黑体;font-size:100px;color:#f00;" >htlml文字组件</span>
        `);
        planeWithHtml.position.set(6, 6, 0);
        planeWithHtml.scale.set(0.01, 0.01, 0.01);
        planeWithHtml.rotateX(degToRad(90));

        this.add(planeWithHtml);
        return planeWithHtml;
    })();

    // htlml样式面板
    spriteWithHtml = (() => {
        const spriteWithHtml = new SpriteWithHtml();

        spriteWithHtml.position.set(6, 9, 0);

        spriteWithHtml
            .setHtml(
                `
            <span style="font-family: 黑体;font-size:100px;color:#000;" >SpriteWithHtml</span>
            <br/>
            <span style="font-family: 黑体;font-size:100px;color:#f00;" >htlml文字组件</span>
        `
            )
            .then(() => {
                spriteWithHtml.scale.multiplyScalar(0.01);
            });

        this.add(spriteWithHtml);
        return spriteWithHtml;
    })();

    // 挤出公路模型
    extrudeMesh = (() => {
        const material = new MeshPhongMaterial({
            side: DoubleSide,
            map: threeLoader.getTexture(road1PNG),
            wireframe: false,
        });
        const extrudeMesh = new ExtrudeMesh(
            {
                paths: [
                    // 挤出路径的点位置    转弯半径   转弯分段数     当前点的缩放            取个名字
                    {
                        vector3: [65.77, 5.7, 0.07],
                        radius: 3,
                        segments: 2,
                        scale: { x: 1, y: 1 },
                        name: "路口1",
                    },
                    {
                        vector3: [50, 1, 0],
                        radius: 3,
                        segments: 10,
                        scale: { x: 1, y: 1 },
                        name: "路口2",
                    },
                    {
                        vector3: [90, 1, 10],
                        radius: 3,
                        segments: 0,
                        scale: { x: 1, y: 1 },
                        name: "路口3",
                    },
                    {
                        vector3: [50, 1, 10],
                        radius: 3,
                        segments: 0,
                        scale: { x: 1, y: 1 },
                        name: "路口1",
                    },
                    {
                        vector3: [90, 1, 30],
                        radius: 3,
                        segments: 2,
                        scale: { x: 1, y: 1 },
                        name: "路口1",
                    },
                    {
                        vector3: [50, 1, 30],
                        radius: 3,
                        segments: 0,
                        scale: { x: 1, y: 1 },
                        name: "路口1",
                    },
                ], // 自动生成路径的
                shapePath: [
                    [-2, 0],
                    [2, 0],
                ], // 被拉伸成模型的平面路径
                closed: false, // 是否闭合路径
            },
            material
        );

        //three事件
        extrudeMesh.userData = {
            cursor: "pointer",
            enableEvent: true,
        };

        extrudeMesh.addEventListener("click", (e: any) => {
            this.manyModelGroup.addData({
                id: utils.uuid(),
                name: "",
                url: "./model/greenTree.glb",
                position: {
                    x: e.point.x,
                    y: e.point.y,
                    z: e.point.z,
                },
            });
            console.log(e.point);
        });
        this.add(extrudeMesh);
        return extrudeMesh;
    })();

    // 精灵文字样式2
    spriteText2 = (() => {
        const spriteText2 = new SpriteText2("精灵文字2");
        //three事件
        spriteText2.userData = {
            cursor: "pointer",
            enableEvent: true,
        };
        spriteText2.addEventListener("leftclick", (e) => {
            if (spriteText2.text === "精灵文字2") {
                spriteText2.text = "SpriteText2";
            } else {
                spriteText2.text = "精灵文字2";
            }
        });

        spriteText2.padding = 1;
        spriteText2.backgroundColor = "rgba(0,0,0,0.5)";
        spriteText2.borderColor = "#fff000";
        spriteText2.borderWidth = 1;
        spriteText2.borderRadius = 4;
        spriteText2.position.set(0, 15, 0);
        this.add(spriteText2);
        return spriteText2;
    })();

    //切换视角测试按钮
    lookAtBox1 = (() => {
        const geometry = new BoxGeometry(1, 1, 1);
        const matearil = new MeshLambertMaterial({ color: 0x00ffff });
        const mesh = new Mesh(geometry, matearil);
        mesh.position.set(-0.6, 0, 0);

        //three事件
        mesh.userData = {
            cursor: "pointer",
            enableEvent: true,
        };
        mesh.addEventListener("leftclick", (e) => {
            this.setLookAt({
                position: new Vector3(0, 0, 30),
                center: new Vector3(0, 0, 0),
            });
        });
        this.add(mesh);
        return mesh;
    })();

    //切换视角测试按钮
    lookAtBox2 = (() => {
        const geometry = new BoxGeometry(1, 1, 1);
        const matearil = new MeshLambertMaterial({ color: 0xffff00 });
        const mesh = new Mesh(geometry, matearil);
        mesh.position.set(0.6, 0, 0);

        //three事件
        mesh.userData = {
            cursor: "pointer",
            enableEvent: true,
        };
        mesh.addEventListener("leftclick", (e) => {
            this.setLookAt({
                position: new Vector3(0, 0, -30),
                center: new Vector3(0, 0, 0),
            });
        });
        this.add(mesh);
        return mesh;
    })();

    //镜子
    mirror = (() => {
        const mirror = new Mirror();
        mirror.position.set(0, 5, -10);
        this.add(mirror);
        return mirror;
    })();

    //加载 stl 模型
    stlMesh = (() => {
        const stlMesh = new StlMesh(stlSTL);
        stlMesh.addEventListener("loaded", () => {
            stlMesh.position.set(0, 0, -20);
            this.add(stlMesh);
            const octree = this.fpscontrol.addOctree(stlMesh);
            const octreeHelper = new OctreeHelper(octree);
            this.add(octreeHelper);
        });
        return stlMesh;
    })();

    // 加载usdz
    usdzMesh = (() => {
        const usdzMesh = new USDZ();
        usdzMesh.position.set(0, 0.1, -15);
        this.add(usdzMesh);
        return usdzMesh;
    })();

    //MeshBase 测试
    meshBase = (() => {
        const meshBase = new MeshBase(SoldierGLB);
        meshBase.setAnimas("Walk"); // 设置动画
        this.add(meshBase);
        return meshBase;
    })();

    meshBase2 = (() => {
        const meshBase = new MeshBase(SoldierGLB);
        meshBase.position.set(-1, 0, 0);
        meshBase.setAnimas("Run"); // 设置动作
        this.add(meshBase);
        return meshBase;
    })();

    // 一个三脚面
    tarangleMesh = (() => {
        // 线条模型
        const geometry = (() => {
            const geometry = new BufferGeometry();
            let positionArray = new Int8Array(new Array(9 * 2).fill(0));
            let position = new BufferAttribute(positionArray, 3, false);
            position.setXYZ(0, 1.1, 1.1, 1.1);
            position.setXYZ(1, 10, 10, 0);
            position.setXYZ(2, 0, 10, 10);
            geometry.setAttribute("position", position);
            return geometry;
        })();
        const material = new MeshLambertMaterial({
            color: "#888888",
            side: DoubleSide,
        });
        const tarangleMesh = new Mesh(geometry, material);
        this.add(tarangleMesh);
        return tarangleMesh;
    })();

    //管道模型
    pipeMesh = (() => {
        const pipeMesh = new PipeMesh({
            segments: 10, //分段数
            radius: 0.1, // 半径
            //管道的点位
            vector3s: [
                new Vector3(0, 0, 5),
                new Vector3(5, 0, 5),
                new Vector3(5, 0, 0),
            ],
        });
        //three事件
        pipeMesh.userData = {
            cursor: "pointer",
            enableEvent: true,
        };
        pipeMesh.addEventListener("click", (e) => { });
        this.add(pipeMesh);
        return pipeMesh;
    })();

    // 衣服模型
    ClothMesh = (() => {
        const clothMesh = new ClothMesh(cloth1GLB);
        clothMesh.position.set(13, 2.5, 0);
        this.scene.add(clothMesh);
        return clothMesh;
    })();

    //特效着色器1
    sphereMesh = (() => {
        const sphereMesh = new SphereMesh();
        sphereMesh.position.set(0, 0, 10);
        this.add(sphereMesh);
        return sphereMesh;
    })();

    cameraPosition = new Vector3();
    cameraCenter = new Vector3();

    //监听第一人称的状态
    dispose4 = autorun(
        () => {
            const { firstPerson } = homeStore;
            if (firstPerson) {
                const cameraDirection = this.getCamera()
                    .getWorldDirection(new Vector3())
                    .normalize();
                const position = this.getCamera().position.clone();
                this.controls.target.copy(position.clone().add(cameraDirection));
            }
            this.fpscontrol.enable = firstPerson;
            this.controls.enabled = !firstPerson;
        },
        { delay: 30 }
    );

    render() {
        if (this.fpscontrol.enable) {
            this.fpscontrol.update();
        }

        this.getCamera().getWorldPosition(this.cameraPosition);
        this.cameraCenter.copy(this.controls.target);
        this.cameraPosition
            .sub(this.cameraCenter)
            .multiply(new Vector3(1, -1, -1))
            .setLength(20)
            .add(this.cameraCenter);
        this.directionalLight2.position.copy(this.cameraPosition);
        this.directionalLight2.target.position.copy(this.cameraCenter);
        this.directionalLightHelper2.update();

        this.getCamera().getWorldPosition(this.cameraPosition);
        this.cameraCenter.copy(this.controls.target);
        this.cameraPosition
            .sub(this.cameraCenter)
            .multiply(new Vector3(-1, -1, 1))
            .setLength(20)
            .add(this.cameraCenter);
        this.directionalLight3.position.copy(this.cameraPosition);
        this.directionalLight3.target.position.copy(this.cameraCenter);
        this.directionalLightHelper3.update();

        this.getCamera().getWorldPosition(this.cameraPosition);
        this.pointLight.position.copy(this.cameraPosition);

        super.render();
    }
}

const homeRenderer = (window.homeRenderer = new HomeRender());

export default homeRenderer;
